<template>
  <main class="dashboard-main">
    <!-- 数据概览 -->
    <section class="data-cards">
      <el-card v-for="(item, index) in stats" :key="index" class="stat-card"
        :style="{ borderBottom: `4px solid ${item.color}` }">
        <div class="card-body">
          <div class="card-text">
            <div class="value">{{ item.value }}</div>
            <div class="label">{{ item.label }}</div>
          </div>
          <div class="card-icon" :style="{ backgroundColor: item.color }">
            <el-icon :size="24">
              <component :is="item.icon" />
            </el-icon>
          </div>
        </div>
      </el-card>
    </section>

    <!-- 核心图表区 -->
    <section class="chart-area">
      <!-- 主图表 -->
      <el-card class="main-chart">
        <!-- <v-chart :option="mainChartOption" autoresize /> -->
        <div class="chart-title">学习趋势分析
          <e-charts class="chart" :option="option" />
        </div>

      </el-card>

      <!-- 辅助指标 -->
      <div class="side-indicators">
        <el-card class="progress-card">
          <div class="progress-wrapper">
            <el-progress type="dashboard" :percentage="82" :color="progressColors" :width="120">
              <span class="progress-text">82%</span>
            </el-progress>
            <div class="progress-label">课程完成率</div>
          </div>
        </el-card>
        <el-card class="pie-card">
          <div>课程类型分布</div>
          <v-chart :option="pieChartOption" autoresize />
        </el-card>
      </div>
    </section>

    <!-- 数据列表 -->
    <section class="data-table">
      <el-card>
        <el-table :data="tableData" height="300" style="width: 100%">
          <el-table-column prop="course" label="热门课程" width="400" />
          <el-table-column prop="students" label="在学人数" width="160" />
          <el-table-column prop="progress" label="平均进度" width="160">
            <template #default="{ row }">
              <el-progress :percentage="row.progress" :color="progressColors" />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </section>
  </main>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([CanvasRenderer, LineChart, PieChart, GridComponent, TooltipComponent, LegendComponent])

// 统计卡片数据
const stats = ref([
  { label: '活跃用户', value: '2,845', icon: 'User', color: '#409EFF' },
  { label: '课程总数', value: '68', icon: 'Notebook', color: '#67C23A' },
  { label: '公告总数', value: '78', icon: 'DataLine', color: '#E6A23C' },
  { label: '文章总数', value: '92', icon: 'Trophy', color: '#F56C6C' }
])

// 主图表配置
const mainChartOption = ref({
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    axisLine: { lineStyle: { color: '#DCDFE6' } }
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#DCDFE6' } }
  },
  series: [{
    data: [65, 82, 93, 90, 93, 129],
    type: 'line',
    smooth: true,
    areaStyle: {
      color: {
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: 'rgba(64, 158, 255, 0.6)' },
          { offset: 1, color: 'rgba(64, 158, 255, 0.02)' }
        ]
      }
    },
    itemStyle: { color: '#409EFF' }
  }]
})

// 饼图配置
const pieChartOption = ref({
  tooltip: { trigger: 'item' },
  series: [{
    type: 'pie',
    radius: ['50%', '70%'],
    data: [
      { value: 35, name: '编程课程', itemStyle: { color: '#409EFF' } },
      { value: 28, name: '设计课程', itemStyle: { color: '#67C23A' } },
      { value: 20, name: '语言课程', itemStyle: { color: '#E6A23C' } },
      { value: 17, name: '其他课程', itemStyle: { color: '#F56C6C' } }
    ]
  }]
})

// 进度条颜色
const progressColors = [
  { color: '#F56C6C', percentage: 20 },
  { color: '#E6A23C', percentage: 40 },
  { color: '#67C23A', percentage: 60 },
  { color: '#409EFF', percentage: 80 }
]

// 表格数据
const tableData = ref([
  { course: 'Python基础入门', students: 345, progress: 78 },
  { course: 'UI设计原理', students: 278, progress: 82 },
  { course: '机器学习实战', students: 192, progress: 65 },
  { course: '英语口语进阶', students: 156, progress: 91 },
  { course: 'JAVA入门到精通', students: 324, progress: 99 }
])

const option = {
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Python基础入门', 'UI设计原理', 'UI设计原理', '英语口语进阶', 'JAVA入门到精通']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Python基础入门',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'UI设计原理',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'UI设计原理',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '英语口语进阶',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'JAVA入门到精通',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

const option2 = {
  xAxis: {
    type: 'category',
    data: ['java', 'wechat', 'python']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [40, 30, 20, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};
</script>

<style scoped>
.dashboard-main {
  padding: 24px;
  background: #f5f7f9;
  min-height: 100vh;
}

.data-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  :deep(.el-card__body) {
    padding: 20px;
  }

  .card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
    .value {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .label {
      color: #909399;
      font-size: 14px;
    }

    .card-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }
  }


.chart-area {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.main-chart {
  height: 400px;
  position: relative;
}
  :deep(.el-card__body) {
    height: calc(100% - 40px);
  }

  .chart-title {
    position: absolute;
    left: 24px;
    top: 24px;
    font-weight: 500;
    color: #303133;
  }


.side-indicators {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.progress-card {
  height: 200px;
}
  .progress-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
    .progress-label {
      margin-top: 16px;
      color: #606266;
    }

    .progress-text {
      font-size: 24px;
      color: #409EFF;
    }
  


.pie-card {
  flex: 1;
  position: relative;

  :deep(.el-card__body) {
    height: calc(100% - 40px);
  }

  .chart-title {
    position: absolute;
    left: 24px;
    top: 24px;
    font-weight: 500;
    color: #303133;
  }
}

.data-table {
  :deep(.el-card__body) {
    padding: 0;
  }

  .el-table {
    --el-table-border-color: transparent;
    --el-table-header-bg-color: #f8f9fa;
  }
}

.chart {
  height: 300px;
  width: 600px;
}

.chart2 {
  height: 130px;
  width: 200px;
}
</style>